<template>
  <a-card :bordered="false">
    <div>
      <!--编写Ant Design组件，组件需要在官方文件查找修改使用-->
      <a-row :gutter="[8,24]">
        <a-col :span="6">
          <span style="font-size: 16px;font-weight: bolder">主体名称:</span>
          <a-input placeholder="请输入主体名称"  style="width: 170px" allowClear v-model="queryParam.companyName"/>
        </a-col>
        <a-col :span="6">
          <span style="font-size: 16px;font-weight: bolder">手机号码:</span>
          <a-input placeholder="请输入手机号码"  style="width: 170px" allowClear v-model="queryParam.mobilePhone"/>
        </a-col>
        <template v-if="toggleSearchStatus">
          <!--省市区级联组件-->
          <!--可选传入查询参数对象queryParam，当把对象传入子组件，就可以将子组件中的数据带出，作为查询的参数-->
          <Area :queryParam="queryParam" isCountry></Area>
          <a-col :span="6">
            <span style="font-size: 16px;font-weight: bolder">所属行业:</span>
              <j-dict-select-tag placeholder='请选择所属行业'
                                 v-model='queryParam.industryType'
                                 dictCode='industry_type' style="width: 170px"/>
          </a-col>
        </template>

        <a-col :span="6">
          <a-button type="primary" icon="search" @click="loadData">
            查询
          </a-button>
          <a-button type="primary" icon="redo" style="margin-left: 10px">
            重置
          </a-button>
          <a @click="handleToggleSearch" style="margin-left: 8px">
            {{ toggleSearchStatus ? '收起' : '展开' }}
            <a-icon :type="toggleSearchStatus ? 'up' : 'down'"/>
          </a>
        </a-col>
      </a-row>
      <br/>
      <a-row>
        <a-col :span="6">
          <a-button type="primary" icon="download"  @click="loadData">
            导出
          </a-button>
          <a-dropdown v-if="selectedRowKeys.length > 0">
            <a-menu slot="overlay">
              <a-menu-item key="1">
                <a-icon type="delete"/>
                删除
              </a-menu-item>
              <a-menu-item key="2">
                <a-icon type="lock"/>
                冻结
              </a-menu-item>
              <a-menu-item key="3">
                <a-icon type="unlock"/>
                解冻
              </a-menu-item>
            </a-menu>
            <a-button style="margin-left: 8px">
              批量操作
              <a-icon type="down"/>
            </a-button>
          </a-dropdown>
        </a-col>
      </a-row>

      <a-row style="margin-top: 30px">
        <a-col :span="24">
          <div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">
            <i class="anticon anticon-info-circle ant-alert-icon"></i>已选择&nbsp;<a style="font-weight: 600">{{ selectedRowKeys.length }}</a>项&nbsp;&nbsp;
            <a style="margin-left: 24px" @click="onClearSelected">清空</a>
          </div>
          <a-table :data-source="tableData"
                   bordered  rowKey="id"
                   :pagination="ipagination"
                   :loading="loading"
                   :row-selection="{ fixed : true,selectedRowKeys: selectedRowKeys,onChange: onSelectChange}"
                   :scroll="{ x: 1600 }"
                   @change="handleTableChange">
            <a-table-column title="主体名称" data-index="companyName" align="center"/>
            <a-table-column title="注册手机号" data-index="mobilePhone" align="center" width="140px"/>
            <a-table-column title="是否有营业执照" align="center"  width="90px">
              <template slot-scope="text,record,index">
                <a-tag v-if="record.businessFlag == 1" color="green">
                  有
                </a-tag>
                <a-tag v-else color="red">
                  无
                </a-tag>
              </template>
            </a-table-column>
            <a-table-column-group>
              <span slot="title">详细地址</span>
              <a-table-column data-index="province" align="center" width="100px">
                <span slot="title">省</span>
              </a-table-column>
              <a-table-column data-index="city" align="center" width="120px">
                <span slot="title">市</span>
              </a-table-column>
              <a-table-column data-index="area" align="center" width="160px">
                <span slot="title">区/县</span>
              </a-table-column>
              <a-table-column data-index="country" align="center" width="160px">
                <span slot="title">乡镇/街道</span>
              </a-table-column>
              <a-table-column data-index="detailAddress" align="center" width="260px">
                <span slot="title">地址</span>
              </a-table-column>
            </a-table-column-group>
            <a-table-column title="所属行业" data-index="industryType" align="center"  width="90px">
              <template slot-scope="text,record,index">
                {{filterDictTextByCache('industry_type', text)}}
              </template>
            </a-table-column>
            <a-table-column title="营业执照" data-index="businessLicenseUrl" align="center" width="120px">
              <!--图片预览-->
              <template slot-scope='text,record,index'>
                <span v-if='!text' style='font-size: 12px;font-style: italic;'>无图片</span>
                <!--imgClickView点击查看，getImgView列表默认展示-->
                <img v-else @click='imgClickView(text)' :src='getImgView(text)' height='25px' alt=''
                     style='max-width:80px;font-size: 12px;font-style: italic;cursor: pointer;'/>
                <!--多图片点击预览组件-->
                <duo-image-viewer :list="imgSrcList"
                                  @update:show="handleClose"
                                  :show="showViewer" :currentIndex="currentIndex"/>
              </template>
            </a-table-column>
            <a-table-column title="操作" fixed="right" align="center" width="130px">
              <template slot-scope="text,record,index">
                <a href="javascript:;" @click="openUpdateModal(record)">编辑</a>
                <a-divider type="vertical" />
                <a-dropdown>
                  <a class="ant-dropdown-link">
                    更多 <a-icon type="down"/>
                  </a>
                  <a-menu slot="overlay">
                    <a-menu-item>
                      <a href="javascript:;">审核</a>
                    </a-menu-item>
                    <a-menu-item>
                      <a href="javascript:;">重置</a>
                    </a-menu-item>
                    <a-menu-item>
                      <a-popconfirm title="确定删除吗?">
                        <a>删除</a>
                      </a-popconfirm>
                    </a-menu-item>
                  </a-menu>
                </a-dropdown>
              </template>
            </a-table-column>
          </a-table>
        </a-col>
      </a-row>

      <a-modal v-model="updateVisible" title="编辑会员"  width="60%">
        <a-form-model :model="updateForm"  :label-col="labelCol" :wrapper-col="wrapperCol" >
          <a-form-model-item label="主体名称：" >
            <a-input v-model="updateForm.companyName" disabled/>
          </a-form-model-item>
          <a-form-model-item label="注册手机号：" >
            <a-input v-model="updateForm.mobilePhone" disabled/>
          </a-form-model-item>
          <a-form-model-item label="是否有营业执照：" >
            <a-radio-group v-model="updateForm.businessFlag">
              <a-radio-button :value="1">
                是
              </a-radio-button>
              <a-radio-button :value="0">
                否
              </a-radio-button>
            </a-radio-group>
          </a-form-model-item>
          <a-form-model-item label="省：" >
            <a-input v-model="updateForm.province" disabled/>
          </a-form-model-item>
          <a-form-model-item label="市：" >
            <a-input v-model="updateForm.city" disabled/>
          </a-form-model-item>
          <a-form-model-item label="区/县：" >
            <a-input v-model="updateForm.area" disabled/>
          </a-form-model-item>
          <a-form-model-item label="乡镇/街道：" >
            <a-input v-model="updateForm.country" disabled/>
          </a-form-model-item>
          <a-form-model-item label="详细地址：" >
            <a-input v-model="updateForm.detailAddress" disabled/>
          </a-form-model-item>
          <a-form-model-item label="所属行业：" >
            <j-dict-select-tag placeholder='请选择所属行业'
                               v-model='updateForm.industryType'
                               dictCode='industry_type' style="width: 170px"/>
          </a-form-model-item>
          <a-form-model-item label="营业执照：" >
              <span v-if='!updateForm.businessLicenseUrl' style='font-size: 12px;font-style: italic;'>无图片</span>
              <!--imgClickView点击查看，getImgView列表默认展示-->
              <img v-else @click='imgClickView(updateForm.businessLicenseUrl)' :src='getImgView(updateForm.businessLicenseUrl)' height='25px' alt=''
                   style='max-width:80px;font-size: 12px;font-style: italic;cursor: pointer;'/>
              <!--多图片点击预览组件-->
              <duo-image-viewer :list="imgSrcList"
                                @update:show="handleClose"
                                :show="showViewer" :currentIndex="currentIndex"/>
          </a-form-model-item>
        </a-form-model>
      </a-modal>
    </div>
  </a-card>
</template>

<script>
//定义引入的js插件
// 引入
import Area from '@/components/nongjt/Area'
import {getAction} from '@/api/manage'
import JDictSelectTag from '@/components/dict/JDictSelectTag'
import {getDictItemsFromCache} from '@/api/api.js'
export default {

  data() {
    return {
      /*** 多图片查看 start*/
      currentIndex: 0, // 打开图片查看器时，需要定位到的图片的索引
      imgSrcList: [], // 图片查看器数据集
      showViewer: false, // 是否打开图片查看器
      /*** 多图片查看 end*/
      //定义组件中关联属性
      toggleSearchStatus: false,
      /* 表格绑定数据*/
      tableData:[
        {

          "id": "1",
          "userId": "fake_data",
          "mobilePhone": "fake_data",
          "registerTime": "2026-08-26 01:54:50",
          "companyName": "fake_data",
          "legalPersonName": "fake_data",
          "businessFlag": 1,
          "businessLicenseUrl": "fake_data",
          "certificationQualificationUrl": "fake_data",
          "province": "fake_data",
          "city": "fake_data",
          "area": "fake_data",
          "country": "fake_data",
          "detailAddress": "fake_data",
          "addressCode": "fake_data",
          "produceType": "fake_data",
          "mainType": "fake_data",
          "industryType": "fake_data",
          "phoneNumber": "fake_data",
          "creditCode": "fake_data",
          "idNumber": "fake_data",
          "registerMoney": 12.11,
          "logoUrl": "fake_data",
          "photoWall": "fake_data",
          "photoMsg": "fake_data",
          "longitude": "fake_data",
          "latitude": "fake_data",
          "foundTime": "2017-03-13 02:24:54",
          "examineStatus": 33,
          "examineMsg": "fake_data",
          "examineTime": "2014-10-12 21:08:56",
          "sptPassword": "fake_data",
          "sptLoginName": "fake_data",
          "sptAuth": 58,
          "isSync": 8,
          "delFlag": 4,
          "createBy": "fake_data",
          "createTime": "2026-01-09 05:55:31",
          "updateBy": "fake_data",
          "updateTime": "2016-11-30 18:08:20"

        },
        {

          "id": "2",
          "userId": "fake_data",
          "mobilePhone": "fake_data",
          "registerTime": "2026-08-26 01:54:50",
          "companyName": "fake_data",
          "legalPersonName": "fake_data",
          "businessFlag": 0,
          "businessLicenseUrl": "fake_data",
          "certificationQualificationUrl": "fake_data",
          "province": "fake_data",
          "city": "fake_data",
          "area": "fake_data",
          "country": "fake_data",
          "detailAddress": "fake_data",
          "addressCode": "fake_data",
          "produceType": "fake_data",
          "mainType": "fake_data",
          "industryType": "fake_data",
          "phoneNumber": "fake_data",
          "creditCode": "fake_data",
          "idNumber": "fake_data",
          "registerMoney": 12.11,
          "logoUrl": "fake_data",
          "photoWall": "fake_data",
          "photoMsg": "fake_data",
          "longitude": "fake_data",
          "latitude": "fake_data",
          "foundTime": "2017-03-13 02:24:54",
          "examineStatus": 33,
          "examineMsg": "fake_data",
          "examineTime": "2014-10-12 21:08:56",
          "sptPassword": "fake_data",
          "sptLoginName": "fake_data",
          "sptAuth": 58,
          "isSync": 8,
          "delFlag": 4,
          "createBy": "fake_data",
          "createTime": "2026-01-09 05:55:31",
          "updateBy": "fake_data",
          "updateTime": "2016-11-30 18:08:20"

        }
      ],
      /* 分页条参数 */
      ipagination:{
        current: 1,
        pageSize: 5,
        pageSizeOptions: ['5', '10', '20'],
        showTotal: (total, range) => {
          return range[0] + "-" + range[1] + " 共" + total + "条"
        },
        showSizeChanger: true,
        total: 50
      },
      /* table选中行主键值*/
      selectedRowKeys: [],
      /* table选中行数据*/
      selectionRows: [],
      /* 显示加载中特效*/
      loading:false,
      /* 弹窗显示隐藏*/
      updateVisible:false,
      /* 表单控件布局属性*/
      labelCol: { span: 6 },
      wrapperCol: { span: 16 },
      /* 编辑弹窗回显绑定对象*/
      updateForm:{},
      //页面中所有请求后端接口的url
      url: {
        page: "/user/njtUserPerfect/page",
      },
      //分页查询参数对象
      queryParam:{},


    }
  },
  methods: {
    /** 多图片点击预览 */
    imgClickView(text){
      // 将图片路径处理一下
      let srcArray = text.split(",")
      let srcAllArray= []
      srcArray.forEach((temp)=>{
        srcAllArray.push(this.getImgView(temp))
      })
      this.imgSrcList = srcAllArray;
      this.showViewer = !this.showViewer
    },
    // 多图片查看器打开
    handleOpen() {
      this.showViewer = !this.showViewer
    },
    // 多图片查看器关闭
    handleClose() {
      this.showViewer = false
    },
    /* 图片预览 */
    //解决数据库存储多张图片，表格默认显示第一张
    getImgView(text){
      if(text && text.indexOf(",")>0){
        text = text.substring(0,text.indexOf(","))
      }
      return text;
    },
    //从字典中获取数据方法。参数1为字典标识名 参数2为字典项key值 ，方法返回字段key表示的中文
    filterDictTextByCache(dictCode, key) {
      if(key==null ||key.length==0){
        return;
      }
      if (!dictCode) {
        return '字典Code不能为空!';
      }
      //优先从缓存中读取字典配置
      if(getDictItemsFromCache(dictCode)){
        let item = getDictItemsFromCache(dictCode).filter(t => t["value"] == key)
        if(item && item.length>0){
          return item[0]["text"]
        }
      }
    },
    //表格自带分页条内容切换时触发事件
    handleTableChange(pagination){
      //将新的分页数据赋值给原分页条数据
      this.ipagination = pagination;
      this.loadData();
    },
    //定义组件事件关联方法
    openUpdateModal(record){
      //将事件传入的表格行对象，浅拷贝赋值给弹窗回显对象
      this.updateForm = Object.assign({},record)
      this.updateVisible = true;
    },
    handleToggleSearch() {
      this.toggleSearchStatus = !this.toggleSearchStatus;
    },
    onSelectChange(selectedRowKeys, selectedRows) {
      this.selectedRowKeys = selectedRowKeys;
      this.selectionRows = selectedRows;
    },
    onClearSelected(){
      this.selectedRowKeys = [];
      this.selectionRows = [];
    },
    loadData(){
      //发送后端的参数对象：分页条件参数数据+查询条件参数数据
      //页面搜索条件数据，一般都是直接给参数对象进行双向绑定获取
      //因为分页数据在分页条对象中，所以需要手动操作
      this.queryParam.pageNum = this.ipagination.current;
      this.queryParam.pageSize = this.ipagination.pageSize;
      getAction(this.url.page,this.queryParam).then((resp => {
         this.tableData = resp.result.records;
         this.ipagination.total = resp.result.total;
      }))
    },




  },
  // 注册
  components: {
    JDictSelectTag,Area

  },
  created() {
    //页面加载前执行的操作
    this.loadData();


  }
}
</script>